<!DOCTYPE html>
<html lang="en">
<!-- 园林设计第一套模块 1-2 -->

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/bootstrap4.5.min.css">
    <link rel="stylesheet" href="../css/swiper-bundle.min.css">
    <link rel="stylesheet" href="../css/public.css">
    <style>
        .img_collection_list {
            display: flex;
            flex-wrap: wrap;
        }
        .img_collection_list li{
            flex: 25%;
            padding: 0 15px;
        }
        .img_collection_list_item{
            position: relative;
        }
        .img_collection_list_item_playBtn {
            position: absolute;
            width: 56px;
            height: 56px;
            background: url(../images/videBtn.png)-116px -196px no-repeat;
            top: 0%;
            left: 50%;
            transform: translateX(-50%);
            opacity: 0;
            cursor: pointer;
        }

        .img_collection_list_item:hover .img_collection_list_item_playBtn {
            top: 50%;
            transform: translate(-50%, -50%);
            opacity: 1;
            transition: .5s ease;
        }

        .img_collection_list_item:hover .img_collection_list_item_img img {
            transform: scale(1.1);
        }

        .img_collection_list_item_img {
            overflow: hidden;
        }

        .img_collection_list_item_img img {
            width: 100%;
            height: 260px;
            object-fit: cover;
            transition: .5s ease;
        }

        .video_bg_mask {
            width: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            position: fixed;
            top: 0px;
            display: none;
            z-index: 20;
        }

        .video_bg_mask .float_video_frame {
            margin: auto;
            background-color: black;
            position: relative;
            width: 960px;
            max-height: 540px;
        }

        .video_bg_mask .float_video,
        .video_bg_mask .float_video:focus {
            outline: none;
            width: 100%;
            height: 100%;
        }

        .float_video_frame_close {
            background-image: url(../images/close.png);
            background-repeat: no-repeat;
            display: block;
            width: 50px;
            background-size: 50% 50%;
            background-position: center;
            height: 50px;
            position: absolute;
            top: 0;
            z-index: 21;
            right: 0;
            cursor: pointer;
        }

        @media (max-width:768px) {
            .img_collection_list {
            }
            .img_collection_list ul{
                margin-left: -6px;
                margin-right: -6px;
            }
            .img_collection_list li{
                flex: 50%;
                padding: 6px;
            }
            .img_collection_list_item {
                flex: 100%;
            }

            .img_collection_list_item_img img {
                height: 97px;

            }

            .img_collection_list_item .img_collection_list_item_playBtn {
                top: 50%;
                transform: translate(-50%, -50%);
                opacity: 1;
                transition: .5s ease;
            }


        }
    </style>
    <script src="../js/jquery-3.5.1.min.js"></script>
    <script src="../js/bootstrap4.5.min.js"></script>
    <script src="../js/swiper-bundle.min.js"></script>

</head>

<body>
    <div class="img_collection layout1 title_center modular">
        <div class="public_width">
            <div class="public_title">
                <h2>“BEGINNER'S GUIDE”</h2>
                <p>新手指南</p>
            </div>
            <ul class="img_collection_list">
                <li>
                    <div class="img_collection_list_item">
                        <div class="img_collection_list_item_img">
                            <img src="../images/img_collection_2.webp" alt="">
                        </div>
                        <div class="img_collection_list_item_playBtn"
                            data-video-src="https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218114723HDu3hhxqIT.mp4">
                        </div>
                    </div>
                </li>
                <li>
                    <div class="img_collection_list_item">
                        <div class="img_collection_list_item_img">
                            <img src="../images/img_collection_2.webp" alt="">
                        </div>
                        <div class="img_collection_list_item_playBtn"
                            data-video-src="https://v-cdn.zjol.com.cn/276982.mp4">
                        </div>
                    </div>
                </li>
                <li>
                    <div class="img_collection_list_item">
                        <div class="img_collection_list_item_img">
                            <img src="../images/img_collection_2.webp" alt="">
                        </div>
                        <div class="img_collection_list_item_playBtn"
                            data-video-src="http://0.ss.faisys.com/image/rimage/module/online_flv/Sun.mp4 ">
                        </div>
                    </div>
                </li>
                <li>
                    <div class="img_collection_list_item">
                        <div class="img_collection_list_item_img">
                            <img src="../images/img_collection_2.webp" alt="">
                        </div>
                        <div class="img_collection_list_item_playBtn"
                            data-video-src="http://0.ss.faisys.com/image/rimage/module/online_flv/Sun.mp4 ">
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div id="video_bg_mask" class="video_bg_mask">
            <div class="float_video_frame">
                <span class="float_video_frame_close" id="float_video_frame_close"></span>
                <video id="float_video" src="" class="float_video" controls contextmenu="">
                </video>
            </div>
        </div>
    </div>
    <script>
        $(function () {
            document.getElementById('video_bg_mask').style.height = window.innerHeight + 'px'
            document.getElementById('float_video_frame_close').addEventListener('click', function () {
                document.getElementById('video_bg_mask').style.display = 'none'
            })
            document.querySelectorAll('.img_collection_list_item_playBtn').forEach(el => {
                el.addEventListener('click', function () {
                    document.getElementById('video_bg_mask').style.display = 'flex'
                    document.getElementById('float_video').getAttributeNode('src').value = el
                        .getAttributeNode('data-video-src').value
                })
            })
            $(window).resize(function () {
                document.getElementById('video_bg_mask').style.height = window.innerHeight + 'px'
            })
        })
    </script>
</body>

</html>